<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        article, aside, footer, header, hgroup, main, nav, section {
            display: block;
        }
        body,html {
            height: 100%;
            font: 14px/1.5 Arial;
            position:relative;
        }
        a {
            color: #444;
            text-decoration: none;
        }
        main {
            position: relative;
            height: 100%;
            width: 100%;
            background: linear-gradient(to right top, rgba(38,50,105,0.78), rgba(255,152,0,0.45)),  url("./bg.jpg" ) no-repeat center center ;
            background-size: cover;
        }
        .modal {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background: #fff;
            width: 400px;
            box-shadow: 0 3px 4px 5px rgba(0,0,0,0.2);
            /* text-align: center; */
            padding: 16px;
        }
        .close {
            position: absolute;
            top: 10px;
            right: 15px;
        }
        input:focus {
            outline: none;
        }
        .tabs {
           text-align: center;
        }
        .content {
            padding: 20px 40px;
        }
        .input-field {
            margin-top: 10px;
            position: relative;
            text-align: start;
        }
        .input-field .fa {
            position: absolute;
            left: 13px;
            top: 13px;
        }
        input {
           padding: 10px 10px 10px 28px;
           width: 100%;
           text-align: start;
           border: 1px solid #cccccc;
        }
        button {
            padding: 6px 10px;
            background: #fff;
            outline: none;
            border: 1px solid #cccccc;
        }
        .modal .tabs a {
            display: inline-block;
            font-size: 16px;
            margin: 0 10px;
            color: #666;
        }
        .active {
            border-bottom: #444 1px solid;
        }
        .my-flip {
            display: none;
        }
        .my-flip.login .modal-login,
        .my-flip.register .modal-register {
            transform: translate(-50%,-50%) rotateY(0deg);
            backface-visibility: hidden;
            transition: all 1s;
        }
        .my-flip.login .modal-register,
        .my-flip.register .modal-login {
            transform: translate(-50%,-50%) rotateY(180deg);
            backface-visibility: hidden;
            transition: all 1s;
        }
        header {
            position: absolute;
            top: 10px;
            width: 100%;
            height: 10px;
            z-index: 999;
        }   
        header .login {
            float: right;
            margin-right: 20px;
            font-size: 16px;
        }
        .errormsg {
            color: red
        }
    </style>
</head>
<body>
    <header class="fix">
       <a class="login" href="#">
            <i class="fa fa-user-circle login"></i>
       </a>
    </header>
    <main>
        <div class="my-flip login">
                <div class="modal modal-login">
                        <a href="#" class="close">
                            <i class="fa fa-close close"></i>
                        </a>
                        <div class="tabs">
                           <a class="login active" href="#">登陆</a>
                           <a class="register" href="#">注册</a>
                        </div>
                        <div class="content">
                           <div class="errormsg"></div>
                           <div class="input-field"><i class="fa fa-user-o" ></i><input type="text" name="username" placeholder="输入用户名"></div>
                           <div class="input-field"><i class="fa fa-lock" ></i><input type="password" name="password" placeholder="输入密码"></div>
                           <div class="input-field">
                               <button class="submit-login">登陆</button>
                            </div>
                        </div>
                    </div>
                    <div class="modal  modal-register">
                        <a href="#" class="close">
                            <i class="fa fa-close close"></i>
                        </a>
                         <div class="tabs">
                            <a class="login" href="#">登陆</a>
                            <a class="register active" href="#">注册</a>
                         </div>
                         <div class="content">
                            <div class="errormsg"></div>
                            
                            <div class="input-field"><i class="fa fa-user-o"></i><input type="text" name="username"  placeholder="输入用户名"></div>
                            <div class="input-field"><i class="fa fa-lock"></i><input type="password" name="password" placeholder="输入密码"></div>
                            <div class="input-field"><i class="fa fa-lock"></i><input type="password" name="passwor2" placeholder="输入密码"></div>
                            <div class="input-field">
                                <button class="submit-register">注册</button>
                            </div>
                            
                         </div>  
                    </div>
        </div>
        
    </main>
    <script>
      function $(val){
          return document.querySelector(val)
      }
      function all(val){
          return document.querySelectorAll(val)
      }
      
      $("header .login .login").addEventListener("click",(e)=>{
          e.stopPropagation()
        $(".my-flip").style.display = "block";
      })
      $(".my-flip").addEventListener("click",(e)=>{
          e.stopPropagation()
         if(e.target.classList.contains("login")){
             $('.my-flip').classList.remove("register")
             $('.my-flip').classList.add("login")
         }
         if(e.target.classList.contains("register")){
             $('.my-flip').classList.remove("login")
             $('.my-flip').classList.add("register")
         }
         if(e.target.classList.contains("close")){
             $('.my-flip').style.display = "none"
         }
      })
      document.addEventListener('click',()=>{
          $('.my-flip').style.display = 'none'
      })
      $(".submit-login").addEventListener("click",(e)=>{
           console.log(".submit-login");
           e.preventDefault();
           if(!/^\w{3,8}$/.test($('.modal-login input[name=username]').value)){
                $('.modal-login .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
                return false
            }
            if(!/^\w{6,10}$/.test($('.modal-login input[name=password]').value)){
                $('.modal-login .errormsg').innerText = '密码需输入6-10个字符，包括字母数字下划线'
                return false
            }
      })
      $(".submit-register").addEventListener("click",(e)=>{
           console.log(".submit-register");
           e.preventDefault();
           if(!/^\w{3,8}$/.test($('.modal-register input[name=username]').value)){
            $('.modal-register .errormsg').innerText = '用户名需输入3-8个字符，包括字母数字下划线'
            return false
            }
            if(/^hunger$|^ruoyu$/.test($('.modal-register input[name=username]').value)){
                $('.modal-register .errormsg').innerText = '用户名已存在'
                return false
            }
            if(!/^\w{6,10}$/.test($('.modal-register input[name=password]').value)){
                $('.modal-register .errormsg').innerText = '密码需输入6-10个字符，包括字母数字下划线'
                return false
            }
            if($('.modal-register input[name=password]').value !== $('.modal-register input[name=password2]').value){
                $('.modal-register .errormsg').innerText = '两次输入的密码不一致'
                return false
            }
      })
    </script>
</body>
</html>